<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      a:link {
        color: red;
      }
      a:visited {
        color: orange;
      }
      a:hover {
        color: green;
      }
      a:active {
        color: blue;
      }

      div {
        width: 300px;
        height: 300px;
        background-color: lightblue;
      }
      div:hover {
        background-color: lightcoral;
        font-size: 30px;
      }

      section {
        width: 400px;
        height: 400px;
        background-color: aquamarine;
      }
      article {
        width: 200px;
        height: 200px;
        background-color: brown;
      }
      /* article:hover {
        background-color: blue;
      } */
      section:hover article {
        background-color: blue;
      }
      section:hover + footer {
        color: red;
      }
    </style>
  </head>
  <body>
    <a href="#456">跳转到百度</a>

    <div>这是div元素</div>

    <section>
      <article></article>
    </section>

    <footer>这是底部</footer>
  </body>
</html>

<!-- 
  动态伪类选择器
    x:link {}    初始的样式
    x:visited {} 访问过后的样式
    x:hover {}   鼠标悬浮时的样式
    x:active {}  鼠标点击时的样式

    和动态伪类选择器最匹配的是超链接a标签

    当这四种动态伪类选择器一起用的时候，a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效


    一般的元素时没有访问的概念，所以像div这样的元素就只能使用hover和active
    鼠标移入谁，就给谁加hover
 -->
